<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>名称监听</title>
    <script src="../../lib/vue.js"></script>
</head>
<body>
    <div id="app">
        <input v-model="firstname">+
        <input v-model="lastname">=
        <input v-model="fullname">
    </div>

    <script>
        var vue = new Vue({
            el:'#app',
            data:{
                firstname:'',
                lastname:'',
                fullname:''
            },
            watch:{//可以监听data中所有值的改变
                //firstname:代表监听的元素
                //newVal：更改后的值
                //oldVal：更改前的值
                firstname:function(newVal,oldVal){
                    this.fullname = newVal + "--"+this.lastname;
                },
                lastname:function(newVal,oldVal){
                    this.fullname = this.firstname + "--"+newVal
                }
            }
        })

    </script>
</body>
</html>